Connect to solr (search product), header component with title, fix product card layout, show product search result

author: IT Fixcomart <it@fixcomart.co.id> 2022-11-11 18:02:11 +0700
committer: IT Fixcomart <it@fixcomart.co.id> 2022-11-11 18:02:11 +0700
commit: 8ee5432961a5b73e8e5c42af2eda05621723c9e7 (patch)
tree: 12b7e0628328f6f10f03b464ad0717a729e2ede0 /src/pages/shop/product/[slug].js
parent: df04a3504e61f3c1257b5a46310e39c51bf23bea (diff)
1 files changed, 85 insertions, 117 deletions
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index f50d5037..e601d8c0 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -1,17 +1,13 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import ProductCard from "../../../components/ProductCard";
 import Header from "../../../components/Header";
 import { getOdoo } from "../../../helpers/apiOdoo";
 import { createSlug, getId } from "../../../helpers/slug";
 import currencyFormat from "../../../helpers/currencyFormat";
-import Head from "next/head";
-import { Swiper, SwiperSlide } from "swiper/react";
 import { LazyLoadImage } from "react-lazy-load-image-component";
-import ImagePlaceholderIcon from "../../../icons/image-placeholder.svg";
-import "swiper/css";
 import "react-lazy-load-image-component/src/effects/blur.css";
+import ProductSlider from "../../../components/product/ProductSlider";
 
 export async function getServerSideProps(context) {
   const { slug } = context.query;
@@ -83,126 +79,98 @@ export default function ProductDetail({product}) {
 
   return (
     <>
-      <Head>
-        <title>{product.name + '- Indoteknik'}</title>
-      </Head>
-      <Header />
-      <div className="px-4 pt-5 pb-10">
-        <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border border-gray-300 rounded-md mb-4 w-full h-[300px] object-contain object-center" />
-        <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
-          {product.manufacture.name || '-'}
-        </Link>
-        <h1 className="mb-3">{product.name}{activeVariant.attributes != '' ? ' - ' + activeVariant.attributes : ''}</h1>
-
-        {product.variant_total > 1 && selectedVariant == "" ? (
-          <p className="text-xs text-gray-800 mb-1">Harga mulai dari:</p>
-        ) : ''}
-
-        {product.lowest_price.discount_percentage > 0 ? (
-          <div className="flex gap-x-1 items-center">
-            <span className="badge-yellow">{activeVariant.price.discount_percentage}%</span>
-            <p className="text-xs text-gray-800 line-through">{currencyFormat(activeVariant.price.price)}</p>
-          </div>
-        ) : ''} 
-
-        {product.lowest_price.price > 0 ? (
-          <p className="text-lg text-gray-900 font-semibold">{currencyFormat(activeVariant.price.price_discount)}</p>
-        ) : (
-          <p className="text-gray-800">Dapatkan harga terbaik, <a href="">hubungi kami.</a></p>
-        )}
-
-        <div className="flex gap-x-2 mt-5">
-          <div className="w-9/12">
-            <label className="form-label">Pilih: <span className="text-gray-800">{product.variant_total} Varian</span></label>
-            <select name="variant" className="form-input" value={selectedVariant} onChange={onchangeVariant} >
-              <option value="" disabled={selectedVariant != "" ? true : false}>Pilih Varian...</option>
-              {product.variants.length > 1 ? (
-                product.variants.map((variant) => {
-                  return (
-                    <option key={variant.id} value={variant.id}>{variant.attributes.join(', ')}</option>
-                  );
-                })
-              ) : (
-                <option key={product.variants[0].id} value={product.variants[0].id}>{product.variants[0].name}</option>
-              )}
-            </select>
-          </div>
-          <div className="w-3/12">
-            <label htmlFor="quantity" className="form-label">Jumlah</label>
-            <input type="number" name="quantity" id="quantity" className="form-input text-center is-invalid" value={quantity} onChange={(e) => setQuantity(e.target.value)} />
-          </div>
-        </div>
-
-        <div className="flex gap-x-2 mt-2">
-          <button className="btn-light w-full" >+ Quotation</button>
-          <button className="btn-primary w-full" onClick={addToCart} disabled={(product.lowest_price.price == 0 ? true : false)}>+ Keranjang</button>
-        </div>
+      <Header title={`${product.name} - Indoteknik`}/>
+      <main>
+
+        <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border-b border-gray-300 w-full h-[300px] object-contain object-center" />
+        <div className="p-4 pb-10">
+          <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
+            {product.manufacture.name ?? '-'}
+          </Link>
+          <h1 className="mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1>
+
+          {product.variant_total > 1 && !selectedVariant ? (
+            <p className="text-xs text-gray-800 mb-1">Harga mulai dari:</p>
+          ) : ''}
 
-        <div className="mt-10">
-          <h2 className="h1 mb-2">Detail Produk</h2>
-          <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
-            <h3 className="text-gray-900">Jumlah Varian</h3>
-            <p className="text-gray-800">{product.variant_total} Varian</p>
-          </div>
-          <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
-            <h3 className="text-gray-900">Nomor SKU</h3>
-            <p className="text-gray-800" id="sku_number">SKU-{activeVariant.id}</p>
+          {product.lowest_price.discount_percentage > 0 ? (
+            <div className="flex gap-x-1 items-center">
+              <span className="badge-yellow">{activeVariant.price.discount_percentage}%</span>
+              <p className="text-xs text-gray-800 line-through">{currencyFormat(activeVariant.price.price)}</p>
+            </div>
+          ) : ''} 
+
+          {product.lowest_price.price > 0 ? (
+            <p className="text-lg text-gray-900 font-semibold">{currencyFormat(activeVariant.price.price_discount)}</p>
+          ) : (
+            <p className="text-gray-800">Dapatkan harga terbaik, <a href="">hubungi kami.</a></p>
+          )}
+
+          <div className="flex gap-x-2 mt-5">
+            <div className="w-9/12">
+              <label className="form-label">Pilih: <span className="text-gray-800">{product.variant_total} Varian</span></label>
+              <select name="variant" className="form-input" value={selectedVariant} onChange={onchangeVariant} >
+                <option value="" disabled={selectedVariant != "" ? true : false}>Pilih Varian...</option>
+                {product.variants.length > 1 ? (
+                  product.variants.map((variant) => {
+                    return (
+                      <option key={variant.id} value={variant.id}>{variant.attributes.join(', ')}</option>
+                    );
+                  })
+                ) : (
+                  <option key={product.variants[0].id} value={product.variants[0].id}>{product.variants[0].name}</option>
+                )}
+              </select>
+            </div>
+            <div className="w-3/12">
+              <label htmlFor="quantity" className="form-label">Jumlah</label>
+              <input type="number" name="quantity" id="quantity" className="form-input text-center is-invalid" value={quantity} onChange={(e) => setQuantity(e.target.value)} />
+            </div>
           </div>
-          <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
-            <h3 className="text-gray-900">Part Number</h3>
-            <p className="text-gray-800" id="part_number">{activeVariant.code}</p>
+
+          <div className="flex gap-x-2 mt-2">
+            <button className="btn-light w-full" >+ Quotation</button>
+            <button className="btn-primary w-full" onClick={addToCart} disabled={(product.lowest_price.price == 0 ? true : false)}>+ Keranjang</button>
           </div>
-          <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
-            <h3 className="text-gray-900">Stok</h3>
-            <p className="text-gray-800" id="stock">
-              {activeVariant.stock > 0 ? (activeVariant.stock > 5 ? 'Lebih dari 5' : 'Kurang dari 5') : '0'}
-            </p>
+
+          <div className="mt-10">
+            <h2 className="font-bold mb-2">Detail Produk</h2>
+            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
+              <h3 className="text-gray-900">Jumlah Varian</h3>
+              <p className="text-gray-800">{product.variant_total} Varian</p>
+            </div>
+            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
+              <h3 className="text-gray-900">Nomor SKU</h3>
+              <p className="text-gray-800" id="sku_number">SKU-{activeVariant.id}</p>
+            </div>
+            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
+              <h3 className="text-gray-900">Part Number</h3>
+              <p className="text-gray-800" id="part_number">{activeVariant.code}</p>
+            </div>
+            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
+              <h3 className="text-gray-900">Stok</h3>
+              <p className="text-gray-800" id="stock">
+                {activeVariant.stock > 0 ? (activeVariant.stock > 5 ? 'Lebih dari 5' : 'Kurang dari 5') : '0'}
+              </p>
+            </div>
+            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
+              <h3 className="text-gray-900">Berat Barang</h3>
+              <p className="text-gray-800" id="weight">{activeVariant.weight > 0 ? activeVariant.weight : '1'} KG</p>
+            </div>
           </div>
-          <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
-            <h3 className="text-gray-900">Berat Barang</h3>
-            <p className="text-gray-800" id="weight">{activeVariant.weight > 0 ? activeVariant.weight : '1'} KG</p>
+
+          <div className="mt-10">
+            <h2 className="font-bold mb-4">Deskripsi Produk</h2>
+            <div className="text-gray-800 leading-7" dangerouslySetInnerHTML={{__html: (product.description.trim() != '' ? product.description.replaceAll(/<*b>/g, '') : 'Belum ada deskripsi produk.')}}></div>
           </div>
-        </div>
 
-        <div className="mt-10">
-          <h2 className="h1 mb-4">Deskripsi Produk</h2>
-          <div className="text-gray-800 leading-7" dangerouslySetInnerHTML={{__html: (product.description.trim() != '' ? product.description.replaceAll(/<*b>/g, '') : 'Belum ada deskripsi produk.')}}></div>
-        </div>
+          <div className="mt-10">
+            <h2 className="h1 mb-4">Produk Lainnya</h2>
+            <ProductSlider products={similarProducts}/>
+          </div>
 
-        <div className="mt-10">
-          <h2 className="h1 mb-4">Produk Lainnya</h2>
-          <Swiper freeMode={true} slidesPerView={2.15} spaceBetween={8} loop={true}>
-            {similarProducts?.products?.map((product, index) => (<SwiperSlide key={index}><ProductCard data={product} /></SwiperSlide>))}
-          </Swiper>
-          {similarProducts == null ? (
-            <div className="grid grid-cols-2 gap-x-4">
-              <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
-                <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
-                <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
-                </div>
-                <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
-                <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
-                <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-                <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-                <div className="h-2 bg-gray-200 rounded-full"></div>
-                <span className="sr-only">Loading...</span>
-              </div>
-              <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
-                <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
-                  <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
-                </div>
-                <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
-                <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
-                <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-                <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-                <div className="h-2 bg-gray-200 rounded-full"></div>
-                <span className="sr-only">Loading...</span>
-              </div>
-            </div>
-          ) : ''}
         </div>
-
-      </div>
+      </main>
     </>
   );
 }
 \ No newline at end of file
author	IT Fixcomart <it@fixcomart.co.id>	2022-11-11 18:02:11 +0700
committer	IT Fixcomart <it@fixcomart.co.id>	2022-11-11 18:02:11 +0700
commit	8ee5432961a5b73e8e5c42af2eda05621723c9e7 (patch)
tree	12b7e0628328f6f10f03b464ad0717a729e2ede0 /src/pages/shop/product/[slug].js
parent	df04a3504e61f3c1257b5a46310e39c51bf23bea (diff)